<!--
 * @Description: 我的页面侧边弹出菜单组件
 * @Author: Kerwin
 * @Date: 2024-10-09 18:28:10
 * @LastEditTime: 2025-04-07 14:29:22
 * @LastEditors:  Please set LastEditors
-->
<template>
  <view class="c_container">
    <u-popup v-if="show" v-model="show">
      <view class="wrapper">
        <view class="time"> {{ currentTime }}</view>
        <view class="group" v-for="(menu, index) in menus" :key="index">
          <view class="item" v-for="(item, index2) in menu" :key="index2" @click="openPage(item.path)">
            <hy-svg :name="item.icon" width="40rpx" height="40rpx"></hy-svg>
            <text>{{ item.name }}</text>
          </view>
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted, watch, onBeforeUnmount } from 'vue';
import { onLoad, onShow, onReady, onReachBottom } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
import { baseApi, productApi } from '@/api'
import { getImgFullPath, checkLoginState } from '@/utils/index'
import { useUserStore } from '@/store'
import { route } from '@/utils/common';

const userStore = useUserStore()
const { hasLogin } = storeToRefs(userStore)
const props = defineProps({
  shopId: {
    type: Number
  }
})
const isShop = ref(false)
const menus = reactive([
  [
    {
      name: '购物车',
      icon: 'icon-cart',
      path: '/packageB/pages/cart/index'
    },
    {
      name: '商城订单',
      icon: 'icon-order_normal',
      path: '/packageB/pages/order/index'
    },
    // {
    //   name: '生活服务订单',
    //   icon: 'icon-order_normal',
    //   path: '/pages/address/index'
    // },
    {
      name: '洗车订单',
      icon: 'icon-order_normal',
      path: '/packageB/pages/carWash/order'
    },
  ],
  [
    // {
    //     name: '我的店铺',
    //     icon: 'icon-shop',
    //     path: '/packageC/pages/myShop/index'
    //   },
    {
      name: '店铺入驻',
      icon: 'icon-shop',
      path: '/packageC/pages/shopEnter/index'
    }, {
      name: '商家发券',
      icon: 'icon-coupon_liner',
      path: '/packageE/pages/index/index'
    }, {
      name: '我的人脉',
      icon: 'icon-association_normal',
      path: '/packageD/pages/index/index?tab=1'
    },
    // {
    //   name: '名片收藏',
    //   icon: 'icon-collect',
    //   path: '/pages/card/index'
    // }
  ],
  [
    {
      name: '设置',
      icon: 'icon-set',
      path: '/packageB/pages/setting/index'
    }
  ]
])
// 动态生成路径并跳转
const openPage = (basePath: string) => {
  const fullPath = basePath.includes('?')
    ? `${basePath}&isShop=${isShop.value}`
    : `${basePath}`;
  route({ url: fullPath });
};


// 实时更新时间
let timer: ReturnType<typeof setInterval>
const currentTime = ref()
const updateTime = () => {
  const now = new Date()
  currentTime.value = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })
}

const show = ref(false)
const open = (params?: any) => {
  show.value = true
  console.log(params);
  isShop.value = params
}
defineExpose({
  open
})

onMounted(() => {
  updateTime()
  timer = setInterval(updateTime, 1000)
})
onBeforeUnmount(() => {
  clearInterval(timer)
})
onReachBottom(() => {
})
</script>


<style lang="scss" scoped>
@import '@/styles/helper.scss';

.c_container {
  .wrapper {
    width: 440rpx;
    padding: 30rpx;
    color: #1A1A1A;

    .time {
      font-weight: bold;
    }

    .group {
      border-bottom: 1rpx solid #E1E3E5;
      padding: 20rpx 0;

      &:last-child {
        border: none;
      }

      .item {
        height: 100rpx;
        display: flex;
        align-items: center;
        gap: 20rpx;
      }
    }
  }
}
</style>
